<template>
  <div class="all">
    <div class="item">
      <span>需求名称</span><span>需求负责人</span><span>需求创建者</span
      ><span>需求优先级</span><span>需求进度</span><span>开始时间</span
      ><span>更新时间</span><span>截止时间</span>
    </div>
    <!-- 点击后出现需求的详细信息 -->
    <div
      @click="jumpwindow(d)"
      class="item_detail"
      v-for="d in allDemand.list"
      :key="d.demand_ID"
    >
      <span>{{ d.demand_name }}</span
      ><span>{{ d.person_in_charge }}</span
      ><span>{{ d.create_person }}</span
      ><span>{{ d.level }}</span
      ><span>{{ d.speed }}%</span
      ><span>{{ d.createdAt.toString().split("").splice(0, 10).join("") }}</span
      ><span>{{ d.updatedTime.split("").splice(0, 10).join("") }}</span
      ><span>{{ d.ending_Time }}</span>
    </div>
  </div>

  <div v-if="isShow" class="mask">
    <div class="dialog">
      <div>
        <h3>
          详细信息
          <div class="close" @click="updateData">x</div>
        </h3>
        <div class="demand_name">{{ demand_name }}</div>
        <div class="line2">
          <div class="left">{{ charge }}</div>
          <div class="right1">优先级:{{ level }}</div>
          <!-- <div class="right2">{{ status }}</div> -->
          <div class="right2">
            <ul>
              <span v-if="status == 0">未开始</span>
              <span v-if="status == 1">进行中</span>
              <span v-if="status == 2">已完成</span>
              <!-- <span v-if="status == 2">{{status == 0 ? '未开始' : status == 1 ? '已开始':'已完成'}}</span> -->
              <el-icon class="ICON"><ArrowDown /></el-icon>
              <li v-if="status != 2" @click="status = 2">已完成</li>
              <li v-if="status != 0" @click="status = 0">未开始</li>
              <li v-if="status != 1" @click="status = 1">进行中</li>
            </ul>
          </div>
        </div>
        <div class="line3">
          <div>
            开始时间
            <div>{{ beginTime }}</div>
          </div>
          <div>
            截止时间
            <div>{{ endTime }}</div>
          </div>
          <div>
            更新时间
            <div>{{ updatedTime }}</div>
          </div>
          <div>
            <div>进度:</div>
            <input type="range" v-model="speed" min="0" max="100" />
            <div>{{ speed }}</div>
          </div>
        </div>
        <div class="line4">
          <h3>详细信息:</h3>
          <div>
            {{ detail }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive, onUnmounted } from "vue";
import axios from "axios";
import { ArrowDown } from "@element-plus/icons-vue";
import { useStore } from "vuex";
export default {
  name: "Check",
  components: { ArrowDown },
  setup() {
    let allDemand = reactive({
      list: [],
    });
    let isShow = ref(false);

    // 小面板信息
    let charge = ref("");
    let beginTime = ref("");
    let updatedTime = ref("");
    let endTime = ref("");
    let level = ref("");
    let status = ref("");
    let demand_name = ref("");
    let speed = ref("");
    let detail = ref("");
    let fornow = ref("");
    // willchange用于存放完整的数据条目
    let willchange = [];
    // willchangeid用户快速辨别是否存放过该数据条目
    let willchangeid = new Map();
    // 保留初始时的面板数据,监测是否更改
    // 此处实现的是watch监视的效果
    let sp = "";
    let sta = "";
    // 定时器
    let timer;
    // end
    const store = useStore();
    function jisuan(x, y) {
      let k = x.split("-");
      let m = k[2] - 0;
      let n = m + (y - 0);
      let month = k[1] - 0;
      let year = k[0] - 0;
      // 先判断2月
      if (month == 2) {
        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
          if (n > 29) {
            month++;
            n = n - 29;
            if (month > 12) {
              month = 1;
              year++;
            }
          }
        } else {
          if (n > 28) {
            month++;
            n = n - 28;
            if (month > 12) {
              month = 1;
              year++;
            }
          }
        }
      }
      if (
        month === 1 &&
        month === 3 &&
        month === 5 &&
        month === 7 &&
        month === 8 &&
        month === 10 &&
        month === 12
      ) {
        if (n > 31) {
          month++;
          n = n - 31;
          if (month > 12) {
            month = 1;
            year++;
          }
        }
      } else {
        if (n > 30) {
          month++;
          n = n - 30;
          if (month > 12) {
            month = 1;
            year++;
          }
        }
      }
      k[0] = year;
      k[1] = month;
      k[2] = n;
      return k.join("-");
    }

    function jumpwindow(d) {
      // 当前用户只能查自己的需求
      if (store.state.usernow.id !== d.userID) {
        // console.log(store.state.usernow.id, d.userID);
        return;
      }

      isShow.value = true;
      demand_name.value = d.demand_name;
      beginTime.value = d.createdAt.split("").splice(0, 10).join("");
      updatedTime.value = d.updatedTime.split("").splice(0, 10).join("");
      endTime.value = jisuan(beginTime.value, d.ending_Time);
      level.value = d.level;
      status.value = d.status;
      sta = d.status;
      sp = d.speed;
      console.log(sp,sta)
      speed.value = d.speed;
      charge.value = d.person_in_charge;
      detail.value = d.detailinfo;
      fornow.value = d;
    }

    onMounted(() => {
      if (store.state.real_Item == "") {
        let data = JSON.parse(sessionStorage.getItem("cloud"));
         store.commit('useSessionStorage',[data.ItemID,data.DemandList,data.ItemList,data.main_person,data.real_Item,data.usernow,data.real_Demand])
      }

      allDemand.list = store.state.real_Demand;
      // 在这里定时监测willchange数组 进行集中更新数据 ---- 20s
      timer = setInterval(() => {
        if (willchange.length !== 0) {
          // 在这里直接发送请求
          while (willchange.length !== 0) {
            axios({
              method: "post",
              url: "https://qcjk2s.api.cloudendpoint.cn/updateDemand",
              data: {
                speed: willchange[0].speed,
                status: willchange[0].status,
                idx: willchange[0].demand_ID,
              },
            }).then((res) => {
              console.log("win");
              // 这里不仅要更便当前页面数据还要更变vuex数据还要更具id来返回数据
            });
            willchange.shift();
          }
        }
      }, 20000);
    });

    onUnmounted(() => {
      // 同样,该页面卸载时也发出请求
      console.log(willchange);
      if (willchange.length !== 0) {
        // 在这里直接发送请求

        while (willchange.length !== 0) {
          axios({
            method: "post",
            url: "https://qcjk2s.api.cloudendpoint.cn/updateDemand",
            data: {
              speed: willchange[0].speed,
              status: willchange[0].status,
              idx: willchange[0].demand_ID,
            },
          }).then((res) => {
            console.log("win");
            // 这里不仅要更便当前页面数据还要更变vuex数据还要更具id来返回数据
          });
          willchange.shift();
        }
      }
      clearInterval(timer);
    });

    function updateData() {
      console.log(
        sp,
        sta,
        speed.value,
        status.value,
        willchangeid
      );
      isShow.value = false;
      //决定是否存放更新的数据
      if (
        (sp != speed.value ||
        sta != status.value) &&
        !willchangeid.has(fornow.value.demand_ID)
      ) {
        willchange.push(fornow.value);
        willchangeid.set(fornow.value.demand_ID, 1);
        console.log(willchange);
      } else if (willchangeid.has(fornow.value.demand_ID)) {
        let c = 0;
        willchange.some((item, index) => {
          if (item.demand_ID === fornow.value.demand_ID) {
            c = index;
            return;
          }
        });
        willchange[c] = fornow.value;
        console.log(willchange);
      }
      // 经过这里的操作vuex数据其实上和数据库中的数据已经同步 ---- 就不需要动态重新赋值vuex数据了
      fornow.value.speed = speed.value;
      fornow.value.status = status.value;
    }

    return {
      allDemand,
      isShow,
      charge,
      beginTime,
      level,
      status,
      demand_name,
      speed,
      updatedTime,
      detail,
      endTime,
      fornow,
      updateData,
      jumpwindow,
    };
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  width: 100%;
  .item {
    height: 5%;
    width: 100%;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      width: 12.4%;
      height: 100%;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
  }
  .item_detail {
    height: 5%;
    width: 100%;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      width: 12.4%;
      height: 100%;
      border-bottom: 1px solid #ccc;
    }
  }
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);

  .dialog {
    width: 500px;
    height: 500px;
    background-color: rgb(247, 247, 247);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 5px #ccc;
    div {
      height: 100%;
      width: 100%;
      h3 {
        margin: 5% 0 5% 0;
        position: relative;
        .close {
          position: absolute;
          color: #6fb3f7;
          font-weight: normal;
          cursor: pointer;
          top: 10%;
          right: 2%;
          width: 5%;
        }
      }
      .demand_name {
        margin: 0 0 5% 7%;
        width: 80%;
        height: 5%;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        color: #6fb3f7;
      }
      .line2 {
        height: 5%;
        margin-bottom: 5%;
        position: relative;
        .left {
          position: absolute;
          width: 20%;
          left: 5%;
        }
        .right1 {
          position: absolute;
          width: 20%;
          right: 25%;
        }
        .right2 {
          position: absolute;
          width: 15%;
          right: 5%;
          ul {
            list-style: none;
            height: 100%;
            width: 100%;
            .ICON {
              margin: 0 0 0 5%;
            }
            li {
              position: relative;
              z-index: 2;
              display: none;
              height: 100%;
              width: 100%;
              background-color: white;
              border: 1px solid #ccc;
            }
            &:hover li {
              display: block;
            }
          }
        }
      }
      .line3 {
        height: 30%;
        background-color: rgb(238, 238, 238);
        div {
          width: 50%;
          height: 50%;
          float: left;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          input {
            width: 80%;
          }
        }
      }
      .line4 {
        height: 30%;
        h3 {
          text-align: left;
          margin: 5% 0 3% 5%;
        }
        div {
          height: 63%;
          overflow: auto;
          text-align: left;
          text-indent: 46px;
          scrollbar-width: none;
          /* Firefox */
          -ms-overflow-style: none;
        }
      }
    }
  }
}
</style>